<template>
  <a-modal
    :title="'载入图数据'"
    :visible="visible"
    :width="700"
    ok-text="确定"
    cancel-text="取消"
    :destroy-on-close="true"
    centered
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="graph-analysis-load-data">
      <!-- <div class="search-box-cont">
        <a-input
          v-model="keyword"
          placeholder="输入搜索关键字..."
          allow-clear
        />
      </div> -->
      <div class="number-of-select">
        <span> 共{{ userDataList.length }}个文件 </span>
        <a @click="toDataImport">导入数据</a>
      </div>
      <!--  body  -->
      <div class="description scroll-bar">
        <div>
          <a-tree v-model="checkIds" :tree-data="dealUserDataList" checkable>
          </a-tree>
        </div>
        <div v-if="dealUserDataList.length === 0" class="no-result">
          <img alt="" src="@/assets/view/category-empty.svg" />
          <div>暂无数据</div>
          <div>请到数据管理中导入数据</div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { Vue, Prop, Component, Emit, Watch } from 'vue-property-decorator'
import GraphAnalysis from '@/store/modules/graphanalysis'
import { loadListFiles, loadData } from '@/api/graph-analysis'

@Component({
  components: {},
})
export default class LoadDataModal extends Vue {
  @Prop() visible!: boolean
  @Prop({ type: Number, default: 0 }) projectId!: number

  // 加载数据弹框显示
  public keyword: string = ''
  public searchDataList: Array<any> = []
  public userDataList: any = [] // 用户数据列表(加载)
  public taskId: number = 0 // 当前加载图数据返回的任务id
  public checkIds: Array<any> = [] // 选中的图id
  public myInterval: any = null // 定时器

  /**
   * 加载用户数据列表
   */
  public mounted() {
    loadListFiles().then((response: any) => {
      if (response.data.code === 100) {
        this.userDataList = response.data.result
      }
    })
  }

  /**
   * 加载图数据
   */
  public loadGraphData(file: string) {
    const data: any = {
      projectId: this.projectId,
      graphId: GraphAnalysis.activeTabId,
      fileName: file,
    }
    loadData({ data }).then((response: any) => {
      if (response.data.code === 100) {
        this.taskId = response.data.result
        GraphAnalysis.setLoadIdId(response.data.result) // 存储 任务 id
        GraphAnalysis.setCurrentTabLoadGraphDataIng(2) // 正在加载
        GraphAnalysis.setCurrentLoadingGraphDataTabId(GraphAnalysis.activeTabId) // 正在加载的 tabId (graphId)
      }
    })
  }

  @Watch('checkIds')
  private CheckClear() {
    let index = this.checkIds.length
    while (index > 1) {
      this.checkIds.splice(0, 1)
      index = this.checkIds.length
    }
  }

  @Emit('close')
  private async handleOk() {
    if (this.checkIds.length === 0) {
      this.$message.warning('请选择数据后确认!')
    } else {
      this.loadGraphData(this.checkIds[0])
      return false
    }
    return true
  }

  @Emit('close')
  private async handleCancel() {
    return false
  }

  // 处理数据列表信息
  public get dealUserDataList() {
    const list: Array<any> = []
    this.userDataList.forEach((item: any) => {
      list.push({
        title: String(item),
        key: String(item),
      })
    })
    return list
  }

  // 跳转到数据导入
  public toDataImport() {
    const parameters: any = {
      url: `/project/${this.$route.params.id}/graph-analysis/`,
      projectId: this.$route.params.id,
      loadType: 'graph',
      graphId: GraphAnalysis.activeTabId,
    }
    sessionStorage.setItem('lastUrl', JSON.stringify(parameters))
    const { href } = this.$router.resolve({
      path: '/management/data/import',
    })
    window.location.href = href
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/panelList';

.graph-analysis-load-data {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  height: 300px;
}

.number-of-select {
  align-items: center;
  color: #222432;
  display: flex;
  font-size: 12px;
  font-weight: 400;
  height: 32px;
  justify-content: space-between;
  letter-spacing: 1px;
  line-height: 17px;
  margin-top: 10px;
}

.description {
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}

/deep/ .ant-tree-treenode-switcher-open,
/deep/ .ant-tree-treenode-switcher-close {
  position: relative;

  .ant-tree-checkbox {
    &::before {
      content: ' ';
      display: block;
      height: 32px;
      left: 0;
      position: absolute;
      top: 0;
      width: 1200px;
    }
  }
}
</style>
